<!-- 我的页面的待处理事物 -->
<template>
	<view class="pending flex">
		<image class="pending__img" :src="data.image" mode="aspectFill"></image>
		
		<text>{{ data.name }}</text>
		
		<view class="pending__action-btn">{{ data.status }}</view>
		
		<view class="pending__edit-btn">编辑</view>
		
		<view class="pending__delete-btn" @click="openDialog">删除</view>
		
		<zy-dialog
		ref="dialogRef" 
		:onConfirm="handleConfirm"
		:title="'确认删除这条记录嘛？'"
		></zy-dialog>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import zyDialog from '@/components/zyDialog/zyDialog.vue';

	const props = defineProps({
		data: {
			type: Object,
			default: () => ({})
		},
		itemId: {
			type: String,
			default: ''
		}
	})
	
	// 定义事件发射器
	const emit = defineEmits(['delete-item']);
	
	// 获取 Dialog 组件的引用
	const dialogRef = ref(null);
	
	// 触发弹窗显示
	const openDialog = () => {
	  dialogRef.value?.showDialog();
	};
	
	// 确认按钮的回调函数
	const handleConfirm = () => {
	  console.log("用户点击了确认按钮！");
	  // 触发删除事件，传递要删除的项目的ID
	  emit('delete-item', props.itemId);
	};
</script>

<style lang="scss" scoped>
.pending{
	width: 100%;
	font-size: 24rpx;
	color: #333333;
	margin-bottom: 24rpx;
	&__img{
		width: 135rpx;
		height: 135rpx;
		margin-left: 30rpx;
		margin-right: 47rpx;
	}
	
	&__action-btn,&__edit-btn,&__delete-btn{
		font-size: 24rpx;
		color: #333333;
		padding: .3em .5em;
		background-color: #e2e2e2;
		margin-right: 20rpx;
		border-radius: 15rpx;
	}
	
	&__action-btn{
		background-color: #b4ddee;
		margin-right: 30rpx;
		margin-left: 34rpx;
	}
}
</style>